<template>
  <div class="add-edit-container">
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" :before-close="handleClose">
    <span>
      <el-form :inline="true" :model="studentInfo" :rules="rules" ref="ruleForm" size="mini">
          <el-divider content-position="left">基本信息</el-divider>
          <el-form-item label="学号" prop="snumber">
            <el-input v-model="studentInfo.snumber" placeholder="学号" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="studentInfo.name" placeholder="姓名" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="班级" prop="classes">
            <el-input v-model="studentInfo.classes" placeholder="班级" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="studentInfo.sex" style="margin-right: 60px; width: 140px;">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-divider content-position="left">各科成绩</el-divider>
          <el-form-item label="c语言" label-width="80px">
            <el-input v-model="studentInfo.cscore" placeholder="c语言" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="java" label-width="80px">
            <el-input v-model="studentInfo.jscore" placeholder="java" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="数据库" label-width="80px">
            <el-input v-model="studentInfo.dbscore" placeholder="数据库" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitForm">录入</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref, watch } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from "axios";
interface student {
  snumber: string, // 学号
  name: string, // 姓名
  classes: string, // 班级
  sex: string, // 性别
  cscore: number | null, // c语言成绩
  jscore: number | null, // java成绩
  dbscore: number | null // 数据库成绩
}
export default defineComponent({
  name: "AddAndEditStudent",
  props: {
    formVisible: {
      type: Boolean,
      required: true, // 必须
    },
    name: {
      type: String,
      required: true, // 必须
    },
    studentId: Number
  },
  setup(props, context) {
    const ruleForm = ref(null)  // 表单验证
    // 表单验证规则
    const rules = {
      snumber: {required: true, message: '学号不能为空', trigger: 'blur'},
      name: [
        {required: true, message: '姓名不能为空', trigger: 'blur'},
        {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: ['blur', 'change']}
      ],
      classes: [
        {required: true, message: '班级不能为空', trigger: 'blur'}
      ],
      sex: [
        {required: true, message: '请选择性别', trigger: 'blur'}
      ]
    }


    // 对话框的显示与隐藏
    const dialogVisible = ref(false)
    // 对话框的标题
    const dialogTitle = ref('')
    // 监视props中的属性
    watch([()=>props.formVisible, ()=>props.name], (value) => {
      // console.log(value)
      dialogVisible.value = value[0]
      dialogTitle.value = value[1]
    },{
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true        // 是否是深度监视, 默认是false
    })

    // 关闭对话框
    const closeDialog = ()=>{
      studentInfo.snumber= ''
      studentInfo.name= ''
      studentInfo.classes= ''
      studentInfo.sex= ''
      studentInfo.cscore= null
      studentInfo.jscore= null
      studentInfo.dbscore = null
      id.value = -1;
      let studentRuleForm: any = ruleForm.value
      studentRuleForm.resetFields()
      context.emit('closeDialog', false)  // 触发父组件中的closeDialog事件，并传递参数
    }
    // 处理关闭事件
    const handleClose = () => {
      ElMessageBox.confirm('确认关闭？').then(() => {
        closeDialog()
      }).catch(() => {
        // catch error
      })
    }

    // 学生信息
    const studentInfo:student = reactive<student>({
      snumber: '', // 学号
      name: '', // 姓名
      classes: '', // 班级
      sex: '', // 性别
      cscore: null, // c语言成绩
      jscore: null, // java成绩
      dbscore: null // 数据库成绩
    })
    const id = ref<number | null>()
    watch(()=>props.studentId, (studentId) => {
      id.value = studentId
      if(studentId !== -1) {
        axios.get('/getOneStudent/'+studentId).then(res=>{
          let result = res.data
          if(result.code===200) {
            let data = result.msg.data
            studentInfo.snumber= data.snumber
            studentInfo.name= data.name
            studentInfo.classes= data.classes
            studentInfo.sex= data.sex
            studentInfo.cscore= data.cscore
            studentInfo.jscore= data.jscore
            studentInfo.dbscore = data.dbscore
          }
        }).catch(err=>{
          console.log(err)
        })
      }
    },{
      immediate: true,  // 是否初始化立即执行一次, 默认是false
      deep: true        // 是否是深度监视, 默认是false
    })

    // 添加或修改学生信息
    const submitForm = () => {
      let studentRuleForm: any = ruleForm.value
      studentRuleForm.validate(valid => {
        if (valid) {
          if(id.value && id.value !== -1) {
            console.log(studentInfo)
            axios.put('/updateStudent/'+id.value, {...studentInfo}).then(res=>{
              let data = res.data
              if(data.code===200) {
                ElMessage({
                  type: 'success',
                  message: '更新成功',
                })
                closeDialog()
              } else {
                ElMessage({
                  type: 'warning',
                  message: '更新失败',
                })
              }
            }).catch(err=>{
              console.log(err)
            })
          } else {
            axios.post('/addStudent', {...studentInfo}).then(res=>{
              let data = res.data
              if(data.code===200) {
                ElMessage({
                  type: 'success',
                  message: '新增成功',
                })
                closeDialog()
              } else {
                ElMessage({
                  type: 'warning',
                  message: '新增失败',
                })
              }
            }).catch(err=>{
              console.log(err)
            })
          }
        } else {
          console.log('验证失败')
        }
      })
    }
    return {
      rules,
      ruleForm,
      studentInfo,
      dialogVisible,
      dialogTitle,
      closeDialog,
      handleClose,
      submitForm
    }
  },

});
</script>

<style scoped>
  /*.el-dialog {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: #b3c0d1;
    width: 100vw;
    height: 100vh;
  }*/
</style>
